<template>
	<div v-loading="loading">
		<el-form ref="formRef" :rules="rules" :model="formData" label-width="170px">
			<el-card shadow="never" class="!border-none">
				<div class="text-xl font-medium mb-[20px]">微信小程序</div>
				<el-form-item label="小程序名称：" prop="name">
					<div class="w-80">
						<el-input v-model.trim="formData.name" placeholder="请输入小程序名称" />
					</div>
				</el-form-item>
				<el-form-item label="小程序原始ID：" prop="original_id">
					<div class="w-80">
						<el-input v-model.trim="formData.original_id" placeholder="请输入小程序原始ID" />
					</div>
				</el-form-item>
				<el-form-item label="小程序二维码：" prop="qr_code">
					<div class="w-80">
						<imageUpload v-model="formData.qr_code" promptText="建议尺寸：400*400" :limit="1" />
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">开发者</div>
				<el-form-item label="AppID：" prop="app_id" require>
					<div class="w-[400px]">
						<el-input v-model.trim="formData.app_id" placeholder="请输入AppID"></el-input>
						<div class="el-form-tips">微信公众平台 > 登录小程序账号 > 设置 > 开发设置 > 获取AppID</div>
					</div>
				</el-form-item>
				<el-form-item label="AppSecret：" prop="app_secret" require>
					<div class="w-[400px]">
						<el-input v-model.trim="formData.app_secret" placeholder="请输入AppSecret"></el-input>
						<div class="el-form-tips">微信公众平台 > 登录小程序账号 > 设置 > 开发设置 > 获取AppSecret</div>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">消息推送</div>
				<el-form-item label="接口地址：" prop="server_url">
					<div class="w-[400px]">
						<el-input v-model="formData.server_url" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.server_url)">复制链接</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="验证token：" prop="token">
					<div class="w-[400px]">
						<el-input v-model.trim="formData.token" placeholder="请输入验证token" />
					</div>
				</el-form-item>
				<el-form-item label="消息加密方式：" required>
					<div>
						<el-radio-group v-model="formData.encryption_type">
							<el-radio :label="1">明文模式</el-radio>
							<el-radio :label="2">兼容模式</el-radio>
							<el-radio :label="3">安全模式</el-radio>
						</el-radio-group>
						<div class="el-form-tips">{{ getEncryptionTips }}</div>
					</div>
				</el-form-item>
				<el-form-item label="EncodingAESKey：" prop="encoding_aes_key">
					<div class="w-[400px]">
						<el-input v-model.trim="formData.encoding_aes_key" placeholder="请输入EncodingAESKey" />
						<div class="el-form-tips">消息加密密钥由43位字符组成，字符范围为A-Z,a-z,0-9</div>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">服务器域名</div>
				<el-form-item label="request合法域名：" prop="request_domain">
					<div class="w-[400px]">
						<el-input v-model="formData.request_domain" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.request_domain)">复制链接</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="socket合法域名：" prop="socket_domain">
					<div class="w-[400px]">
						<el-input v-model="formData.socket_domain" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.socket_domain)">复制链接</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="uploadFile合法域名：" prop="uploadFile_domain">
					<div class="w-[400px]">
						<el-input v-model="formData.uploadFile_domain" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.uploadFile_domain)">复制链接</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="downloadFile合法域名：" prop="downloadFile_domain">
					<div class="w-[400px]">
						<el-input v-model="formData.downloadFile_domain" :readonly="true">
							<template #append>
								<el-button @click="copyText(formData.downloadFile_domain)">复制链接</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
			</el-card>
		</el-form>
		<footerSubmit>
			<el-button v-auth="'channel/setAppletConfig'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</div>
</template>

<script lang="ts" setup name="channelApplet">
import { ref, reactive, onMounted, computed } from 'vue';
import { getAppletConfig, setAppletConfig } from '/@/api/channel/applet';
import { messageSuccess } from '/@/utils/message';
import commonFunction from '/@/utils/commonFunction';

const { copyText } = commonFunction();

const formRef = ref(null);

const loading = ref(true);

// 表单数据
const formData = reactive({
	name: '', // 小程序名称
	original_id: '', // 原始ID
	qr_code: '', // 小程序二维码
	app_id: '', // appId
	app_secret: '', // appSecret
	server_url: '', // 接口地址
	token: '', // token
	encryption_type: 1, // 加密方式
	encoding_aes_key: '', // EncodingAESKey
	request_domain: '', //request合法域名
	socket_domain: '', //socket合法域名
	uploadFile_domain: '', //uploadFile合法域名
	downloadFile_domain: '', //downloadFile合法域名
});

const getEncryptionTips = computed(() => {
	switch (formData.encryption_type) {
		case 1:
			return '明文模式下，不使用消息体加解密功能，安全系数较低';
		case 2:
			return '兼容模式下，明文、密文将共存，方便开发者调试和维护';
		default:
			return '安全模式下，消息包为纯密文，需要开发者加密和解密，安全系数高';
	}
});

// 表单验证
const rules = {
	app_id: [{ required: true, message: '请输入AppID', trigger: ['blur'] }],
	app_secret: [{ required: true, message: '请输入AppSecret', trigger: ['blur'] }],
};

// 获取数据
const getData = async () => {
	const data = await getAppletConfig();
	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await formRef.value?.validate();
	await setAppletConfig(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>
